<template>
	<section id="optional">
		<div class="topBox">
			<div class="tableBox_title">
				<van-nav-bar :title="titles"/>
			</div>

			<!-- 排序 -->
			<van-row>
				<van-col span="6">
					<div @click="sortfunc()" :class="sortBy==''?'thisSoet':'sortDiv'">综合排序</div>
				</van-col>
				<van-col span="6">
					<div @click="sortfunc('price_asc')" :class="sortBy=='price_asc'?'thisSoet':'sortDiv'">价格</div>
					</van-col>
				<van-col span="6" >
					<div @click="sortfunc('total_sales_des')" :class="sortBy=='total_sales_des'?'thisSoet':'sortDiv'">销量</div>
				</van-col>
				<van-col span="6" >
					<div @click="sortfunc('tk_rate_des')" :class="sortBy=='tk_rate_des'?'thisSoet':'sortDiv'">火力</div>
				</van-col>
			</van-row>

			<!-- 是否有券 -->
			<div class="has_couponCla">
				<span class="floatLef">
					仅显示优惠券商品
				</span>
				
				<span class="floatRight">
					<van-switch
					v-model="has_coupon"
					size="24px"
					/>
				</span>
			</div>
			<div class="clear"></div>
		</div>
		<!-- 搜索列表 -->
		<div class="optionalListBox">
			<div class="optionalList"  v-for = '(item,index) in listMain' :key="index" @click="convertFunc(item.num_iid)">
				<div class="optionalListLeft">
					<img :src="item.pict_url"/>
				</div>
				<div class="optionalListRight">
					<p class="optionalListRight-title">
						<span class="tag tag-tmall fl" title="天猫店铺" v-if="item.user_type"></span>
						{{item.title}}
					</p>
					<p class="optionalListRight-Presentprice">
						<span>&yen;{{item.zk_final_price}}</span>
						<span class="optionalListRight-PresentSold">月销{{item.volume}}</span>
					</p>
					<p v-if="item.coupon_info" class="optionalListRight-price">
						内部券: {{item.coupon_info}}

						<span class="floatRight" v-if="islogin">火力:{{item.commission_rate}}</span>
					</p>
					<p v-else class="optionalListRight-priceNo">
						无券

						<span class="floatRight" v-if="islogin">火力:{{item.commission_rate}}</span>
					</p>

					<p class="optionalListRight-Coupon">
						<span>
						    {{item.shop_title}}
						</span>
						<span class="floatRight">{{item.provcity}}</span>
					</p>
				</div>
			</div>
		</div>
		
		<!-- 分页 -->
		<div v-if="totalNum">
			<van-pagination 
			v-model="currentPage" 
			:total-items="totalNum" 
			:items-per-page = "10"
			:show-page-size="3" 
			force-ellipses
			@change = "onSupSearch(false)"
			/>
		</div>
		
	</section>
</template>

<script>
import storages from "@/utils/storage.js";
	export default {
		data() {
			return {
				titles: '分类',
				catId: '',
				listMain: [],
				sortBy: '',
				has_coupon: true,
				currentPage: 1,
				totalNum: 0,
			};
		},
		components: {

		},
		methods: {
			onClickLeft(){
				this.$router.go(-1)
			},
			jumpRouter(uri,querys) {
				this.$router.push({path: uri,query:querys})
			},
			sortfunc(sorts){
				this.sortBy = sorts || ''
				this.onSupSearch(false);
			},
			onSupSearch(notChu) {
				if(notChu){
					this.currentPage = 1
				}
				// 推广位ID
				let aliasId = storages.getItem("recommender", {
					type: "local"
				});
				// 加载遮罩
				let loadToast = this.$toast.loading({
					mask: true,
					message: '加载中...',
					duration: '30000'
				});

				this.service.optional({
					q: this.titles,
					//cat: this.catId,
					platform: 2,
					adzone_id: aliasId || '',
					sort: this.sortBy,
					has_coupon: this.has_coupon,
					page_no: this.currentPage,
					page_size: 10
				}).then(res => {
					if (res.code == 1) {
						loadToast.clear();
						let list = res.data;
						if(list.tbk_dg_material_optional_response){
							this.listMain = list.tbk_dg_material_optional_response.result_list.map_data;
							this.totalNum = list.tbk_dg_material_optional_response.total_results
						}else{
							this.listMain = [];
							this.totalNum = 0;
							this.$toast('搜索无结果！');
						}
						
					}
				})
			},
			convertFunc(num_iid){
				num_iid = num_iid + '';

				let routeData = this.$router.resolve({
					name: "coupon",
					query: {num_iids:num_iid}
				});
				window.open(routeData.href, '_blank');
			},
		},
		mounted() {
			let catId = this.$route.query.c
			
			if(catId){
				//catId = this.$route.query.p + ',' + catId
				this.titles = this.$route.query.pn + this.$route.query.n;
				this.catId = catId;
				this.onSupSearch();
			}
			
		},
		computed: {
			islogin: function() {
				let tokens = storages.getItem("token", {
					type: "local"
				});
				
				if(tokens&&tokens!='null'&&tokens!='undefind'){
					return true;
				}else{
					return false;
				}
			},
		},
		watch: {
			'has_coupon'(newVal,old){
				this.onSupSearch();
			}
		},

	};
</script>
<style scoped lang="scss">
#optional{
	padding-bottom: 120px;
	.van-search{
		// background: #FF852A !important;	
		background: -webkit-linear-gradient(left, #FBA959 , #FB897D,#FA4EBE) !important; 
		background: -o-linear-gradient(right, #FBA959 , #FB897D,#FA4EBE) !important; 
		background: -moz-linear-gradient(right, #FBA959 , #FB897D,#FA4EBE) !important;
		background: linear-gradient(to right, #FBA959 , #FB897D,#FA4EBE) !important; 
	}
			
	.floatLef{
		float: left;
		margin-left: 30px;
	}
	.floatRight{
		float: right;
		margin-right: 30px;
	}

	.has_couponCla{
		width: 100%;
		height: auto;
		background: #fff;
		.floatLef{
			margin-top: 20px;
			font-size: 26px;
			color: #999;
		}
		.van-switch{
			margin-top: 10px;
		}
	}
	 
	.topBox{
		position: fixed;
		top: 0;
		width: 100%;
		height: auto;
		background: #fff;
	}
	.van-row{
		background: #fff;
		border-bottom:1px solid #ececec;
		.van-col{
			text-align: center;
			line-height: 80px;
			font-size:30px;
		}
	}

	.thisSoet{
		color: #FF852A;
	}

	.sortDiv{
		color: #1E1E1E;
	}

	.optionalListBox{
		padding-top:248px;
		background: #fff;
		.optionalList{
			display: flex;
			display: -webkit-flex;
			flex-flow: row nowrap;
			justify-content: space-around;
			border-top: 2px solid #cccccc;
			margin-bottom: 8px;
			.optionalListLeft{
				width: 300px;
				margin-right:20px;
			}
			.optionalListLeft img{
				max-width: 300px;
				width: 100%;
				height: auto;
			}
			.optionalListRight{
				.optionalListRight-title{
					font-size:26px;
					line-height: 35px;
					color:#333;
					margin-top: 5px;
					.tag-tmall {
						width: 30px;
						height: 30px;
						vertical-align: middle;
						display: inline-block;
						background-image: url(https://img.alicdn.com/tps/TB1XfA2JVXXXXcQXXXXXXXXXXXX-16-16.png);
						background-repeat: no-repeat;
						background-size: 100% 100%; 
					}
				}
				.optionalListRight-Presentprice{
					font-size:24px;
					color:#999;
					.optionalListRight-PresentSold{
						float: right;
					}
				}
				.optionalListRight-Presentprice span{
					margin-right:30px;
				}
				.optionalListRight-price{
					font-size:26px;
					color:#FF852A;
					span{
						color:#999;
						font-size:24px;
					}
				}
				.optionalListRight-priceNo{
					font-size:26px;
					color:#999;
					span{
						color:#999;
						font-size:24px;
					}
				}

				.optionalListRight-Coupon span{
					font-size:24px;
					color:#999;
				}
			}
			.optionalListRight p{
				line-height: 50px;
			}
		}
	}
	

	.searchBtn{
		padding: 0 10px;
		font-size: 28px;
		line-height: 30px;
		color: white;
	}
}
</style>
